<template>
  <div class="cbd-navbar-area" data-v-3084ff8f>
    <div class="navbar-normal" style data-v-3084ff8f>
      <ul
        data-spm="nav-ch"
        data-spm-stop="init"
        class="navbar-expand-list nav-bar-doubleLine-height"
        data-v-3084ff8f
      >
        <li data-v-3084ff8f v-for="(item,index) in listTitle" :key="index">
          <a
            @click="toNeedFloor(index+1)"
            href="#"
            class="link-video"
            data-v-3084ff8f
            data-spm-data="1"
            v-text="item.name"
          ></a>
        </li>
      </ul>
      <div data-spm-acode="3003" class="navbar-toggle-area" data-v-3084ff8f @click="toPagesLink">
        <i class="toggle i-ic_more_type" data-v-3084ff8f></i>
        <i class="bar-dot dot" data-v-3084ff8f></i>
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/appCss/appTopNav.css'
import $ from "jquery";

export default {
  data() {
    return {
      listTitle: [
        { name: "新闻" },
        { name: "财经" },
        { name: "体育" },
        { name: "娱乐" },
        { name: "军事" },
        { name: "图库" },
        { name: "健康" },
        { name: "汽车" },
        { name: "房产" },
        { name: "小说" },
        { name: "历史" }
      ]
    };
  },
  methods: {
    toNeedFloor(index) {
      switch (index) {
        case 1:
          $("body,html").animate({ scrollTop: 400 }, 500);
          break;
        case 2:
          $("body,html").animate({ scrollTop: 1350 }, 500);
          break;
        case 3:
          $("body,html").animate({ scrollTop: 1800 }, 500);
          break;
        case 4:
          $("body,html").animate({ scrollTop: 2400 }, 500);
          break;
        case 5:
          $("body,html").animate({ scrollTop: 2950 }, 500);
          break;
        case 6:
          $("body,html").animate({ scrollTop: 3550 }, 500);
          break;
        case 7:
          $("body,html").animate({ scrollTop: 3870 }, 500);
          break;
        case 8:
          $("body,html").animate({ scrollTop: 4280 }, 500);
          break;
        case 9:
          $("body,html").animate({ scrollTop: 4800 }, 500);
          break;
        case 10:
          $("body,html").animate({ scrollTop: 5400 }, 500);
          break;
        case 11:
          $("body,html").animate({ scrollTop: 5950 }, 500);
          break;
      }
    }
    ,toPagesLink(){
        this.$router.push({name:"pagesLink"})
      }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
